<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆注册</title>
    <link rel="stylesheet" href="../assets/style.css">
    <link rel="stylesheet" href="../assets/iconfont/iconfont.css">
</head>
<body>
<div id="app">
    <div class='container' id='container'>
        <div class="form-container sign-up-container" :model="sinMsg">
            <!-- 注册 -->
           <form action="#">
            <h1>用户注册</h1>
            <div class="social-container">
                <a href="#" class="social"><i class="iconfont icon-qq"></i></a>
                <a href="#" class="social"><i class="iconfont icon-weixin"></i></a>
                <a href="#" class="social"><i class="iconfont icon-weibo-copy"></i></a>
                <a href="#" class="social"><i class="iconfont icon-github"></i></a>
            </div>
            <span>您可以选择以上几种方式注册一个您的账户!</span>
            <input type="text" v-model="sinMsg.username" placeholder="用户名">
            <input type="password" v-model="sinMsg.password" placeholder="密码">
            <input type="email" v-model="sinMsg.email" placeholder="邮箱">
            <button id="send_code">发送验证码</button>
            <input type="email" placeholder="验证码">
            <button @click="SubmitRegister">注册</button>
           </form>
        </div>
        <div class="form-container sign-in-container" :model="logMsg">
            <!-- 登陆 -->
            <form action="#">
                <h1>用户登陆</h1>
            <div class="social-container">
                <a href="#" class="social"><i class="iconfont icon-qq"></i></a>
                <a href="#" class="social"><i class="iconfont icon-weixin"></i></a>
                <a href="#" class="social"><i class="iconfont icon-weibo-copy"></i></a>
                <a href="#" class="social"><i class="iconfont icon-github"></i></a>
            </div>
            <span>您可以选择以上几种方式登陆您的账户!</span>
            <input type="text" v-model="logMsg.username" placeholder="用户名">
            <input type="password" v-model="logMsg.password" placeholder="密码">

            <a href="#">忘记密码？</a>
            <button @click="SubmitLogIn" id="sinIn">登陆</button>
            </form>
        </div>

        <!-- 侧边栏内容 -->
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <h1>已有帐号？</h1>
                    <p>亲爱的快快点我去进行登陆吧。</p>
                    <button class='ghost' id="signIn">登陆</button>
                </div>
                <div class="overlay-panel overlay-right">
                    <h1>没有帐号？</h1>
                    <p>点击注册去注册一个属于你的账号吧。</p>
                    <button class='ghost' id="signUp">注册</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>



<script src="../js/axios.js"></script>
<script src="../js/vue.js"></script>
<script src="../index.js" defer></script>
<script src="../js/element-ui/lib/index.js"></script>

<link rel="stylesheet" href="../js/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="../assets/style.css">
<link rel="stylesheet" href="../assets/iconfont/iconfont.css">
<script>
  new Vue({
    el:"#app",
    data(){
      return{
        logMsg:{
          username:'',
          password:'',
          email:''
        },
        sinMsg:{
          username:'',
          password:'',
          email:''
        }
      }
    },
    methods:{
      SubmitRegister(){
        console.log(this.sinMsg);
        var _this = this
        axios({
          method:"post",
          url:"http://localhost:8080/element/user/add",
          data:_this.sinMsg
        }).then(resp =>{
          console.log(resp.data);
          if(resp.data == "success"){
            _this.$message({
              showClose: true,
              message: '注册成功,3秒后跳转登录页面',
              type: 'success'
            });
            setTimeout("javascript:location.href='indexdemo.html'",3000);
          }else{
            _this.$message({
              showClose: true,
              message: '用户名已存在',
              type: 'error'
            });
          }
        })
      },
      SubmitLogIn(){
        console.log(this.logMsg);
        var _this = this
        axios({
          method:"post",
          url:"http://localhost:8080/element/user/selectByUsername",
          data:_this.logMsg
        }).then(resp =>{
          if(resp.data == "success"){
            window.location.href='elementdemo.html';
            _this.$message({
              showClose: true,
              message: '登录成功',
              type: 'success'
            });
          }else {
            // window.location.href='indexdemo.html';
            _this.$message({
              showClose: true,
              message: '密码或用户名错误',
              type: 'error'
            });
          }


        })
      }
    },
    mounted() {


    },
  })
</script>
</html>